<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:of="http://omnifaces.org/functions"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Thông tin bài viết</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{itemBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!itemBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:event type="preRenderView" listener="#{itemBean.preViewAction()}" />
        <h:form id="mainForm">
            <p:panel header="Thông tin bài viết">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">
                        <p:button value="Tạo mới" outcome="new"/>
                        <p:commandButton value="Sửa" action="#{itemBean.preEditAction}" update="mainForm" rendered="#{itemBean.item != null}"/>
                        <p:commandButton value="Xóa" actionListener="#{itemBean.preDeleteAction}" update="mainForm:deleteMsgs" 
                                         rendered="#{itemBean.item != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách bài viết" url="list.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%" rendered="#{itemBean.item != null}">  
                    <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên bài viết" />  
                    <h:outputText value="#{itemBean.item.name}" id="name" />
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Danh mục" />  
                    <h:outputText value="#{itemBean.item.category.name}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Ngày tạo" />
                    <h:outputText value="#{of:formatDate(itemBean.item.createdDate, 'yyyy-MM-dd HH:mm:ss')}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Ngày cập nhật" />
                    <h:outputText value="#{of:formatDate(itemBean.item.modifiedDate, 'yyyy-MM-dd HH:mm:ss')}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Trạng thái" />
                    <h:outputText value="#{itemBean.item.status}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Lời giới thiệu" />  
                    <h:outputText value="#{itemBean.item.introduction}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Nội dung" />
                    <h:outputText value="#{itemBean.item.content}" escape="false"/>
                </h:panelGrid>

                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">
                        <p:button value="Tạo mới" outcome="new"/>
                        <p:commandButton value="Sửa" action="#{itemBean.preEditAction}" update="mainForm" rendered="#{itemBean.item != null}"/>
                        <p:commandButton value="Xóa" actionListener="#{itemBean.preDeleteAction}" update="mainForm:deleteMsgs" 
                                         rendered="#{itemBean.item != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách bài viết" url="list.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                    <p:dataList id="deleteMsgs" value="#{facesContext.messageList}"  
                                var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>

                <p:confirmDialog message="Bạn có muốn xóa bài viết này?" appendToBody="true"
                                 header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                    <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="mainForm:msgs"
                                     actionListener="#{itemBean.deleteAction()}" />  
                    <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                </p:confirmDialog>
                
                <script type="text/javascript">
                   function handleDeleteRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           deleteDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } else {
                           deleteConfirm.show();
                       }
                   }  
                </script>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>